{% extends "public/style1/common/base.html" %}
{% block title %}
主页
{% endblock %}
{% block body_class %}category{% endblock %}

{% block content %}
<div class="crt-container-sm">
    <div class="crt-paper-layers">
        <div class="crt-paper clearfix">
            <div class="crt-paper-cont paper-padd clear-mrg">
                <header class="page-header padd-box"><h1 class="title-lg text-upper">Articles</h1></header>
                {% for item in page.elements %}
                <article class="post hentry">
                    {%if item.pic_url %}
                    <div class="post-media">
                        <a href="/view/articles/detail/{{ item.uuid }}" rel="bookmark">
                            <figure class="post-figure"><img src="{{ item.pic_url }}">
                            </figure>
                        </a>
                    </div>
                    {% endif %}
                    <div class="padd-box-sm">
                        <header class="post-header text-center">
                            <h2 class="post-title entry-title text-upper">
                                <a rel="bookmark" href="/view/articles/detail/{{ item.uuid }}">{{ item.title }}</a>
                            </h2>
                            <div class="post-header-info">
                                        <span class="posted-on">
                                           <span class="screen-reader-text">Posted on </span>
                                            <a href="/view/articles/detail/{{ item.uuid }}" rel="bookmark">
                                                <time class="post-date published"
                                                      datetime="{{ item.create_at }}">{{ item.create_at }}</time>
                                                <time class="post-date updated" datetime="{{ item.update_at }}">{{ item.update_at }}</time>
                                            </a>
                                        </span>
                                        &nbsp;<span class="post-author vcard">
                                        by<a class="url fn n" href="/view/about" rel="author">Author</a>
                                        </span>
                            </div>
                        </header>
                        <div class="post-content entry-content editor clearfix clear-mrg">
                            <p>{{ item.summary }}</p>
                        </div>
                        <footer class="post-footer">
                            <div class="post-footer-top brd-btm clearfix">
                                <div class="post-footer-info">
                                            <span class="post-cat-links">
                                                <span class="screen-reader-text">Categories</span>
                                                <a href="#" rel="category tag">浏览{{ item.view_count }}次</a>&nbsp;
                                            </span>
                                    <span class="post-line">|</span>
                                    <a href="" class="post-comments-count">{{ item.comment_count }} 热度</a>
                                </div>
                                <div class="post-more">
                                    <a class="btn btn-sm btn-primary"
                                       href="/view/articles/detail/{{ item.uuid }}" rel="bookmark">Read More</a>
                                </div>
                            </div>
                        </footer>
                    </div>
                </article><!-- .post -->
                {% endfor %}

                <div class="pagination">
                    {% if page.has_pre %}
                    <a class="next page-numbers" href="/view/articles/{{ page.page - 1 }}">
                        <i class="crt-icon crt-icon-chevron-left"></i>
                    </a>
                    {% endif %}
                    {% for index in range(page.size) %}
                    {% if page.page + index < page.total_page %}
                    <a class="page-numbers {{ 'current' if (index + page.page)==page.page else '' }}"
                       href="/view/articles/{{ page.page+index }}">
                        {{ page.page+index }}
                    </a>
                    {% endif %}
                    {% endfor %}
                    {% if page.has_next %}
                    <a class="next page-numbers" href="/view/articles/{{ page.page + 1 }}">
                        <i class="crt-icon crt-icon-chevron-right"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}